<template>
  <div class="login">
    <div class="login_box" :style="heath">
      <h2 style="text-align: center">XXX后台管理系统</h2>
      <el-form
        class="login_form"
        :model="loginfrom"
        :rules="rules"
        ref="loginfrom"
      >
        <template v-if="!register">
          <el-tabs stretch v-model="activeName">
            <!-- 账号密码登录 -->
            <el-tab-pane label="账号密码登录" name="first">
              <div v-if="activeName == 'first'">
                <el-form-item prop="username">
                  <el-input
                    prefix-icon="iconfont icon-user"
                    v-model="loginfrom.username"
                    placeholder="请输入用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    prefix-icon="iconfont icon-3702mima"
                    type="password"
                    v-model="loginfrom.password"
                    placeholder="请输入密码"
                  ></el-input>
                </el-form-item>
                <div class="btns click_fly" @click="register = true">注册</div>
                <div class="set-flex">
                  <el-checkbox
                    v-model="loginfrom.rememberMe"
                    style="margin: 0px 0px 25px 0px"
                    >记住密码</el-checkbox
                  >
                </div>
              </div>
            </el-tab-pane>
            <!-- 验证码登录 -->
            <el-tab-pane label="验证码登录" name="second">
              <div class="mobile-box" v-if="activeName == 'second'">
                <el-form-item prop="mobile">
                  <el-input
                    v-model="loginfrom.mobile"
                    type="text"
                    auto-complete="off"
                    placeholder="手机号"
                  >
                  </el-input>
                </el-form-item>
                <!-- 验证码 -->
                <el-form-item prop="code1">
                  <el-input
                    v-model="loginfrom.code1"
                    auto-complete="off"
                    placeholder="验证码"
                    style="width: 63%"
                    @keyup.enter.native="handleLogin"
                  >
                  </el-input>
                  <div class="login-code">
                    <el-button
                      style="width: 100%"
                      type="primary"
                      @click="sendSms"
                      >{{ sendCode.title }}</el-button
                    >
                  </div>
                </el-form-item>
              </div>
            </el-tab-pane>
          </el-tabs>
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width: 100%"
              class="login-btn"
              @click="login('loginfrom')"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </template>
        <!-- 注册 -->
        <div v-else>
          <el-form-item prop="fusername">
            <el-input
              v-model="loginfrom.fusername"
              type="text"
              auto-complete="off"
              placeholder="姓名"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="fusername">
            <el-input
              v-model="loginfrom.fusername"
              type="text"
              auto-complete="off"
              placeholder="身份证"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="fusername">
            <el-input
              v-model="loginfrom.fusername"
              type="text"
              auto-complete="off"
              placeholder="账号"
            >
            </el-input>
          </el-form-item>

          <el-form-item prop="fpassword">
            <el-input
              v-model="loginfrom.fpassword"
              type="password"
              autocomplete="new-password"
              placeholder="初始密码"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="frpassword">
            <el-input
              v-model="loginfrom.frpassword"
              type="password"
              autocomplete="new-password"
              placeholder="确认密码"
            >
            </el-input>
          </el-form-item>

          <el-form-item prop="fusername">
            <el-input
              v-model="loginfrom.fusername"
              type="text"
              auto-complete="off"
              placeholder="手机号"
            >
            </el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="fcode">
            <el-input
              v-model="loginfrom.fcode"
              auto-complete="off"
              placeholder="手机验证码"
              style="width: 63%"
            >
            </el-input>
            <div class="login-code">
              <el-button style="width: 100%" type="primary" @click="sendSmsf">{{
                sendCodef.title
              }}</el-button>
            </div>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              type="primary"
              @click="forgetClick"
              class="login-btn"
              style="width: 100%"
              >同意并注册</el-button
            >
          </el-form-item>
          <div>
            <el-checkbox v-model="loginfrom.see"
              >我已阅读并同意<a href=""
                >《药易购平台商家注册协议》</a
              ></el-checkbox
            >
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { loginout } from "@/api/login/index.js";
export default {
  name: "Login",
  data() {
    return {
      heath: "",
      loading: false,
      activeName: "first",
      //注册
      register: false,
      loginfrom: {
        username: "admin",
        password: "123456",
        //手机号
        mobile: "",
        //验证码
        code1: "",
        rememberMe: true,

        code: "",
        uuid: "",
        fcode: undefined,
        fusername: undefined,
        fpassword: undefined,
        frpassword: undefined,
        see: false,
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      sendCode: {
        timer: null,
        count: 60,
        disabled: false,
        title: "发送验证码",
      },
      sendCodef: {
        timer: null,
        count: 60,
        disabled: false,
        title: "发送验证码",
      },
    };
  },
  watch: {
    register(v) {
      if (v) {
        this.heath = "height: 700px;";
      } else {
        this.heath = "height: 400px;";
      }
    },
  },
  computed: {
    // disabled() {
    //   return (
    //     this.sendCode.disabled ||
    //     !validMobile(this.loginfrom.mobile) ||
    //     this.isMobileValiOk != 1
    //   );
    // },
  },
  methods: {
    /**
     * @desc :点击重置
     * @params :
     * @author : liangdecheng
     **/
    resetform(formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * @desc :点击登录
     * @date :
     * @params :
     * @author : liangdecheng
     **/
    login(formName) {
      // this.$router.push("Examine");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.$router.push("Examine");
          loginout(this.loginfrom)
            .then((res) => {
              if (res.data.meta.status != 200) {
                this.$message.error(res.data.meta.msg);
              } else {
                this.$message.success(res.data.meta.msg);
                window.sessionStorage.setItem("token", res.data.data.token);
                this.$router.push("home");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },
    //发送验证码
    sendSms() {},
    sendSmsf() {},
    forgetClick() {
      this.register = false;
    },
  },
};
</script>
<style lang="less" scoped>
.login {
  background-color: #2b4b6b;
  height: 100%;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.login_box {
  width: 500px;
  height: 400px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.login_form {
  margin-top: 40px;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.login-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.5s;

  &:hover {
    box-shadow: 0px 0px 15px #0896a8;
    &::before {
      left: 100%;
    }
  }

  &::before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    left: -100%;
    opacity: 0.7;
    background-image: linear-gradient(-45deg, #fff0, #04363d, #fff0);
    transition: all 1s;
  }

  &:active {
    transform: scale(0.95);
  }
}
</style>